<%var jstpl = {%>
<script>
$(document).ready(function(){
	
	layui.upload.render({
    elem: '#upload_file'
    ,url: '/system/demo/excel/upload_file'
    ,accept: 'file' //普通文件
    ,exts: 'xls|xlsx|xml' //只允许上传的文件类型
    ,done: function(res){
    	layer.closeAll('loading'); //关闭loading
      var  d =  JSON.parse(res.data);
      $("#originalFileName").val(d.originalFileName);
      $("#file_name").val(d.file);
    },before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
    	console.info(JSON.stringify(obj));
	    layer.load(); //上传loading
	  }
  });
	
	
	//提交数据到后台	
	layui.form.on('submit(PostData)', function(data){
    	gx.postdata("/system/demo/excel/in_data",data.field,function(d){
    		//提交数据成功   业务逻辑写自己的
    		if(d.state){
    			 app.list_data=d.data;
    	}
    })
    return false;
  });
  //vue  渲染数据 
  
  app =  new  Vue({
  	el:"#vue_app",
  	data:{
  		list_data:[]
  	}
  })
  
  //下面是上传图片的代码
  
  //提交数据到后台	
	layui.form.on('submit(PostImgHandle)', function(data){
		//alert(JSON.stringify(data))
    	gx.post("/system/demo/excel/PostImgHandle","PostImgHandle",function(d){
    		
    	})
 	 });
  
  //多文件列表示例
  var demoListView = $('#demoList')
  ,uploadListIns = layui.upload.render({
    elem: '#testList'
    ,url: '/system/demo/excel/upload_Img'
    ,exts: 'jpg|jpeg|png' //只允许上传图片
    ,accept: 'file'
    ,multiple: true
    ,auto: false
    ,bindAction: '#testListAction'
    ,choose: function(obj){   
      var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
      //读取本地文件
      //<input type="checkbox" checked="checked" value="" />
      obj.preview(function(index, file, result){
        var tr = $(['<tr id="upload-'+ index +'">'
          ,'<td>'+ file.name +'<input type="checkbox" checked class="layui-hide"  value="" name="file_name" lay-ignore /></td>'
          ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
          ,'<td>等待上传</td>'
          ,'<td>'
      
            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
          ,'</td>'
        ,'</tr>'].join(''));
        
        //单个重传
        tr.find('.demo-reload').on('click', function(){
          obj.upload(index, file);
        });
        
        //删除
        tr.find('.demo-delete').on('click', function(){
          delete files[index]; //删除对应的文件
          tr.remove();
          uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
        });
        demoListView.append(tr);
      });
    }
    ,done: function(res, index, upload){
      if(res.code == 0){ //上传成功
        var tr = demoListView.find('tr#upload-'+ index)
        ,tds = tr.children();
  		var  d =  JSON.parse(res.data);
        tr.find("input[name='file_name']").val(d.fileName)
        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
        tds.eq(3).html(''); //清空操作
        return delete this.files[index]; //删除文件队列已经上传成功的文件
      }
      this.error(index, upload);
    }
    ,error: function(index, upload){
      var tr = demoListView.find('tr#upload-'+ index)
      ,tds = tr.children();
      tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
      tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
    }
  });
  
  
})
</script>
<%};%>
<%var csstpl = {%>
<style type="text/css">
	.gexin_preview_img{
		height: 200px; width: 200px; margin-left: 10px;
	}
</style>
<%};%>
<%layout("../layout/_layout_layui.html",{title:'Demo演示',jstpl:jstpl,csstpl:csstpl}){ %>
<div class="layui-row">
	  <!--<input id="test4" type="file" />-->
	  <div class="layui-col-md12">
	  	 <form class="layui-form" >
	  	 		
		  	 	<div class="layui-form-item">
		  	 		<label  class="layui-form-label">渠道</label>
		  	 		<div class="layui-input-inline" style="width: 200px;">
		  	 			<select name="channel" lay-verType="tips"   lay-verify="required">
		  	 				<option value="">请选择渠道</option>
		  	 				<option value="1">渠道1</option>
		  	 				<option value="2">测试渠道1</option>
		  	 			</select>
		  	 		</div>
		  	 		
		  	 		<div class="layui-form-mid layui-word-aux">请选择对应的商家渠道</div>
		  	 	</div>
		  	 	
		  	 	<div class="layui-form-item">
		  	 		<label  class="layui-form-label">备注信息</label>
		  	 		<div class="layui-input-inline" style="width: 200px;">
		  	 			<input class="layui-input" lay-verType="tips"  lay-verify="required" name="remark_text" />
		  	 		</div>
		  	 	</div>
		  	 	
		  	 	<div class="layui-form-item">
		  	 		<label  class="layui-form-label">备注信息</label>
		  	 		<div class="layui-input-inline" style="width: 200px;">
		  	 			  <input type="text" readonly="" name="originalFileName" id="originalFileName" lay-verType="tips" class="layui-input" lay-verify="required" value="" />
		  	 			  <input type="hidden" name="file_name" id="file_name"  value="" />
		  	 		</div>
		  	 		
		  	 		<div class="layui-input-inline"  style="width: 350px;">
		  	 			 <button type="button" class="layui-btn" id="upload_file"><i class="layui-icon">&#xe67c;</i>上传文件</button>
		  	 			  请严格按照excel 模板导入 <a href="/static/excel/log_template.xls" target="_blank">下载模板</a>
		  	 		</div>

		  	 	</div>
		  	 	
		  	 	<div class="layui-form-item">
				    <div class="layui-input-block">
				      <button  type="button" class="layui-btn" lay-submit lay-filter="PostData">立即提交</button>
				      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
				    </div>
			  	</div>
			  	
	  	 </form> 	
	  </div>
	  <!--数据显示-->
	  <div class="layui-col-md12" id="vue_app">
 			<table class="layui-table">
 			  <thead>
			    <tr>
			      <th>ID</th>
			      <th>触发时间</th>
			      <th>信息</th>
			    </tr> 
			  </thead>
			  <tbody>
			  	<tr  v-for="d in  list_data">
			      <th>{{d.id}}</th>
			      <th>{{d.createtime}}</th>
			      <th>{{d.log_info}}</th>
			    </tr> 
			  </tbody>
 			</table>
	  </div>
	  
	  <div class="layui-col-md12" style="margin-top: 20px;">
	    <form class="layui-form" method="post"  action="/"  id="PostImgHandle">
	    	<div  class="layui-form-item">
	    		<label class="layui-form-label">类型</label>
	    		<div class="layui-input-inline">
	    			<select name="type" >
	    				<option value="1">进项发票</option>
	    				<option value="2">销项发票</option>
	    			</select>
	    		</div>
	    	</div>
	    	
			<div  class="layui-form-item">
	    		<label class="layui-form-label">文件</label>
	    		<div class="layui-input-block">
	    			<div class="layui-upload">
						<div class="layui-upload-list">
							<button type="button" class="layui-btn layui-btn-normal" id="testList">添加文件</button>
							<table class="layui-table">
								<thead>
									<tr>
										<th>文件名</th>
										<th>大小</th>
										<th>状态</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody id="demoList"></tbody>
							</table>
						</div>
						<button type="button" class="layui-btn" id="testListAction">开始上传</button>
					</div>
	    		</div>
	    	</div>
	    	
	    	<div  class="layui-form-item">
	    		<label class="layui-form-label">操作</label>
	    		<div class="layui-input-inline">
	    			<button class="layui-btn layui-btn-normal" lay-submit lay-filter="PostImgHandle"  type="button">提交数据</button>
	    		</div>
	    	</div>
	    	
	    </form>
	  </div>
</div>
<%}%>